<template>
	<div class="flex_row">
		<div class="m5 flex_col">
			<div class="flex_row_center">
				<label>时间设置:</label>
				<el-date-picker class="ml5" v-model="ctx.date" />
				<el-button type="warning" class="ml5" @click="onClickToDate">今天</el-button>
			</div>
			<el-button type="primary" @click="onClickExportAll" class="ml5 flex_start_self mt5">导出所有数据</el-button>
			<div class="flex_row_center mt5">
				<label>部门名称:</label>
				<el-input clearable v-model="ctx.orgName" style="width: 200px;" />
				<el-button @click="onClickQuery" type="primary" class="ml5">查询</el-button>
				<el-button @click="onClickExport" type="warning" class="ml5">导出</el-button>
			</div>
			<div style="height: 80vh; overflow-y: scroll; padding-right: 100px;">
				<el-table @row-click="onClickRow" v-if="holidayInfos.length != 0" :data="holidayInfos">
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="account" label="工号" width="130px" />
					<el-table-column prop="days" label="可休天数" width="100px" />
				</el-table>
			</div>
		</div>
		<div class="flex_col" style="overflow-y: scroll; height: 80vh;" v-if="selectInfo != null">
			<EmplParts :info="selectInfo.empl"/>
			<label class="mt10" style="font-size: large;">今年年假详情</label>
			<ServiceParts2 style="margin: 10px;" 
			v-for="(item, index) in selectInfo.holiday.holiday_parts" 
			:key="index" 
			:color="activeColor(selectInfo, index)"
			:info="item" />
		</div>
	</div>
</template>

<script setup lang="ts">

import { service, VERSION_BEFORE, type ServiceYearCalcRes, VERSION_AFTER, VERSION_ALL } from '@/service/api';
import { selectOrg, exportXlsx, dateFormat, activeColor } from '@/service/global';
import { run, runAction } from '@/utils/ui';
import { reactive, ref, watch } from 'vue';
import EmplParts from '@/components/EmplParts.vue';
import ServiceParts2 from '@/components/ServiceParts2.vue';

interface TableData2 {
	name: string,
	account: string,
	days: number,
	data: ServiceYearCalcRes,
}

interface QueryCtx {
	orgName: string,
	date: Date,
}

const ctx = reactive<QueryCtx>({
	orgName: selectOrg.value,
	date: new Date(),
});
const holidayInfos = ref<TableData2[]>([]);
const selectInfo = ref<ServiceYearCalcRes | null>(null);

watch(selectOrg, () => {
	ctx.orgName = selectOrg.value;
})

function onClickToDate() {
	ctx.date = new Date();
}

async function onClickQuery() {
	runAction('查询', '查询', async () => {
		if (ctx.orgName.length == 0) {
			throw '请输入部门名称';
		}
		holidayInfos.value = (await service.calcOrgYearHoliday({
			org_name: ctx.orgName,
			now_date: dateFormat(ctx.date)
		})).map<TableData2>((item) => {
			let days = 0;
			if (item.holiday.current_holiday != null) {
				days = item.holiday.current_holiday.days;
			}
			return {
				name: item.empl.name,
				account: item.empl.account,
				days: days,
				data: item,
			};
		})
	});
}

function onClickRow(info: TableData2) {
	selectInfo.value = info.data;
}

interface ExportXlsxInfo {
	姓名: string,
	工号: string,
	部门: string,
	职位: string,
	前半部分_1月1号到入职日期: number | string,
	后半部分_入职日期到12月31号: number | string,
	整年_1月1号到12月31号: number | string
}

function versionDays(info: ServiceYearCalcRes, version: number) {
	for (const v of info.holiday.holiday_parts) {
		if (v.holiday.version == version) {
			return v.days;
		}
	}
	return '/'
}

 

async function onClickExport() {

	run(async () => {
		if (ctx.orgName.length == 0) {
			throw '请输入部门名称';
		}
		const info = await service.calcOrgYearHoliday({
			org_name: ctx.orgName,
			now_date: dateFormat(ctx.date),
		});
		const xlsxInfo = info.map<ExportXlsxInfo>((item) => {
			return {
				姓名: item.empl.name,
				工号: item.empl.account,
				部门: item.empl.org,
				职位: item.empl.job,
				前半部分_1月1号到入职日期: versionDays(item, VERSION_BEFORE),
				后半部分_入职日期到12月31号: versionDays(item, VERSION_AFTER),
				整年_1月1号到12月31号: versionDays(item, VERSION_ALL),
			};
		});
		const date = dateFormat(ctx.date);
		exportXlsx(xlsxInfo, `${ctx.orgName}${date}.xlsx`);
	})
}

async function onClickExportAll() {
	runAction('导出', '正在导出', async (dialog) => {
		const info = await service.calcAllYearHoliday({
			now_date: dateFormat(ctx.date),
		});
		const xlsxInfo = info.map<ExportXlsxInfo>((item) => {
			return {
				姓名: item.empl.name,
				工号: item.empl.account,
				部门: item.empl.org,
				职位: item.empl.job,
				前半部分_1月1号到入职日期: versionDays(item, VERSION_BEFORE),
				后半部分_入职日期到12月31号: versionDays(item, VERSION_AFTER),
				整年_1月1号到12月31号: versionDays(item, VERSION_ALL),
			};
		});
		const date = dateFormat(ctx.date);
		exportXlsx(xlsxInfo, `所有人员休假信息${date}.xlsx`);
	})
}

</script>
